<template>
  <div>
    <el-card>
      <div slot="header">
        <span>赛事信息</span>
      </div>
      <div>
        <el-table :data="upcomingEvents" style="width: 100%" v-loading="loading">
          <el-table-column prop="eventName" label="赛事名称" width="180"></el-table-column>
          <el-table-column prop="eventTime" label="比赛时间"></el-table-column>
          <el-table-column prop="location" label="比赛地点"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              {{ formatStatus(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="viewDetails(scope.row.eventId)" type="text">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    
    <el-dialog :title="selectedEvent ? selectedEvent.eventName : '赛事详情'" :visible.sync="dialogVisible" width="50%">
      <div v-if="selectedEvent">
        <p><strong>比赛时间:</strong> {{ formatDateTime(selectedEvent.eventTime) }}</p>
        <p><strong>比赛地点:</strong> {{ selectedEvent.location }}</p>
        <p><strong>赛事描述:</strong> {{ selectedEvent.description }}</p>
        <p><strong>参赛队伍:</strong> {{ selectedEvent.teams || '待定' }}</p>
        <p><strong>比赛规则:</strong> {{ selectedEvent.rules }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      upcomingEvents: [],
      selectedEvent: null,  // 保持null初始化，但在模板中做保护
      dialogVisible: false,
      loading: false
    }
  },
  created() {
    this.fetchEvents();
  },
  methods: {
    async fetchEvents() {
      this.loading = true;
      try {
        const response = await axios.get('http://localhost:10086/common/events');
        this.upcomingEvents = response.data.data;
      } catch (error) {
        console.error('获取赛事列表失败:', error);
        this.$message.error('获取赛事列表失败');
      } finally {
        this.loading = false;
      }
    },
    async viewDetails(eventId) {
      try {
        const response = await axios.get(`http://localhost:10086/common/event/${eventId}`);
        this.selectedEvent = response.data.data || {};  // 确保不会是null
        this.dialogVisible = true;
      } catch (error) {
        console.error('获取赛事详情失败:', error);
        this.$message.error('获取赛事详情失败');
        this.selectedEvent = {};  // 失败时设置为空对象
      }
    },
    formatStatus(status) {
      const statusMap = {
        'upcoming': '报名中',
        'finished': '已结束'
      };
      return statusMap[status] || status;
    },
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      const date = new Date(dateTime);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      }).replace(/\//g, '-');
    }
  }
}
</script>